<template>
	<view class="flex-col justify-start relative page">
		<view class="section"></view>
		<image class="image pos" @click="gonoticy" src="/static/assets6/dd19c8bedc32f5bba88b09b4c3e5f421.png" />
		<image class="image pos_2" @click="goset" src="/static/assets6/fc2a8f64d37d72af222cf4b7e040f7a9.png" />
		<image class="image_2 pos_3" src="/static/assets6/9f431f2a3fc9b9170fe26530ee35fd59.png" />
		<text class="text pos_4">宋哲</text>
		<text class="font text_2 pos_6">账号：xdd123456789</text>
		<image class="image_3 pos_5" src="/static/assets6/0c5629092a46771650d749f493d4a115.png" />
		<view class="flex-col justify-start items-center text-wrapper pos_7"><text class="font_2 text_3">天卡</text>
		</view>
		<view class="flex-col section_2 pos_8">
			<view class="flex-col group">
				<text class="self-start font_3 text_4">我的资产</text>
				<view class="mt-16 flex-row justify-between items-center self-stretch">
					<view class="flex-row">
						<image class="shrink-0 image_5" src="/static/assets6/528a8541abca09af508726b69ed9e846.png" />
						<text class="text_5 ml-11">124657</text>
					</view>
					<view class="els">
						<image class="image_4" src="/static/assets6/eb52843e0d7d7095249d5691bd90c9ba.png" />
						<!-- <image class="image_4" src="/static/dazi/nokan.png" mode=""></image> -->
					</view>
				</view>
			</view>
			<view class="flex-row equal-division">
				<view class="flex-row justify-center items-center equal-division-item section_3">
					<image class="image_6" src="/static/assets6/ee6b59a5eec59827be3f2da2ada6cdaf.png" />
					<text class="font_3 text_6 ml-5">充值</text>
				</view>
				<view class="ml-16 flex-row justify-center items-center equal-division-item section_4">
					<image class="image_6" src="/static/assets6/b4340e83875bcc2fe21982948306f800.png" />
					<text class="font_4 text_7 ml-5">明细</text>
				</view>
			</view>
		</view>
		<view class="flex-col pos_9">
			<view class="flex-col mt-12 list-item">
				<view class="flex-row justify-between items-center group_2">
					<text class="font_3">我的订单</text>
					<view class="flex-row items-center">
						<text class="font text_8">全部</text>
						<image class="ml-2 shrink-0 image_3"
							src="/static/assets6/b5b91eddf88856dd6f98eb78a1d31772.png" />
					</view>
				</view>
				<view class="flex-row equal-division_2 mt-13">
					<view class="flex-col items-center group_3 equal-division-item_2" @click="gorder(0)" >
						<image class="image_7" src="/static/assets6/b1df3399e2fc7150832aa986572a88bc.png" />
						<text class="mt-10 font_2">待支付</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2">
						<image class="image_7" src="/static/assets6/8cef48cfa2612effc63d59c6bea5a1a7.png" />
						<text class="mt-10 font_2">待服务</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2">
						<image class="image_7" src="/static/assets6/0454c84c862ff9aff4d2521b79dbd737.png" />
						<text class="mt-10 font_2">服务中</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2">
						<image class="image_7" src="/static/assets6/995e4be15cafb9cf84680ca76f048d9b.png" />
						<text class="mt-10 font_2">已完成</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2">
						<image class="image_7" src="/static/assets6/6ffa9edc32f3102e405ad319ae9712a6.png" />
						<text class="mt-10 font_2">售后</text>
					</view>
				</view>
			</view>


			<view class="flex-col mt-12 list-item">
				<view class="flex-row justify-between items-center group_2">
					<text class="font_3">常用功能</text>
					<!-- 	      <view class="flex-row items-center">
	        <text class="font text_8">全部</text>
	        <image class="ml-2 shrink-0 image_3" src="/static/assets6/b5b91eddf88856dd6f98eb78a1d31772.png" />
	      </view> -->
				</view>
				<view class="flex-row equal-division_2 mt-13">
					<view class="flex-col items-center group_3 equal-division-item_2" @click="gopw">
						<image class="image_8" src="/static/assets6/pw.png" />
						<text class="mt-10 font_2">陪玩列表</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2" @click="dshare">
						<image class="image_8" src="/static/assets6/sha.png" />
						<text class="mt-10 font_2">邀请好友</text>
					</view>
					<view class="flex-col items-center group_3 equal-division-item_2">
						<image class="image_8" src="/static/assets6/buy.png" />
						<text class="mt-10 font_2">购买会员</text>
					</view>

					<view class="flex-col items-center group_3 equal-division-item_2" @click="goshen">
						<image class="image_8" src="/static/assets6/Document Add.png" />
						<text class="mt-10 font_2">申请陪玩</text>
					</view>
					<!-- 申请后开发 -->
					<!-- 	  <view class="flex-col items-center group_3 equal-division-item_2">
		    <image class="image_8" src="/static/assets6/Document Add.png" />
		    <text class="mt-10 font_2">陪玩中心</text>
		  </view> -->

					<view class="flex-col items-center group_3 equal-division-item_2" @click="goimport">
						<image class="image_8" src="/static/assets6/wt.png" />
						<text class="mt-10 font_2">常见问题</text>
					</view>
				</view>
			</view>


		</view>


		<view class="footer">
			<view class="mainbotm">
				<view class="onehome oenmy" @click="goabbar(0)">
					<image src="/static/datab/00.png" mode=""></image>
					<!-- 		<view class="teben">
					聊天
				</view> -->
				</view>
				<view class="onehome oenmy" @click="goabbar(1)">
					<image src="/static/datab/1.png" mode=""></image>
					<!-- 	<view class="teben">
					首页
				</view> -->
				</view>
				<view class="onehome oenmy" @click="goabbar(2)">
					<image src="/static/datab/2.png" mode=""></image>
					<!-- 	<view class="teben">
					首页
				</view> -->
				</view>
				<view class="onehome  acti" @click="goabbar(3)">
					<image src="/static/datab/44.png" mode=""></image>
					<view class="teben">
						我的
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {

			};
		},
		onReady() {
			// 隐藏TabBar
			uni.hideTabBar();
		},
		methods: {
			// 订单
			gorder(i) {
				uni.navigateTo({
					url: '/pages/order/index?type='+i
				})
			},
			// 常见问题
			goimport() {
				uni.navigateTo({
					url: '/pages/common/inteport'
				})
			},

			// 申请陪玩
			goshen() {
				uni.navigateTo({
					url: '/pages/common/appro'
				})
			},
			// 陪玩列表
			gopw() {
				uni.navigateTo({
					url: '/pages/common/paylist'
				})
			},
			// 分享好友
			dshare() {
				uni.navigateTo({
					url: '/pages/common/share'
				})
			},
			// 去公告
			gonoticy() {
				uni.navigateTo({
					url: '/pages/acnoticy/index'
				})
			},
			goset() {
				uni.navigateTo({
					url: '/pages/set/index'
				})
			},
			goabbar(i) {
				switch (i) {
					case 0:
						uni.switchTab({
							url: '/pages/chat/chat'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/newtreds/index'
						})
						// uni.switchTab({
						// 	url: '/pages/friend/friend'
						// })
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/play/index'
						})
						break;
					case 3:
						// uni.switchTab({
						// 	url: '/pages/mine/mine'
						// })

						break;

				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.adijd {
		color: #FB75D6;
		font-size: 28rpx;
	}

	.lest {
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.active {

		color: #2A222F !important;
		font-size: 48rpx !important;

		position: relative;
		display: inline-block;
	}

	.active::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		/* 调整此值以改变下划线与文本之间的距离 */
		left: 50%;
		/* 将起点设为文本的中间 */
		width: 50%;
		/* 根据实际需要调整宽度，这里是相对于文本容器的宽度 */
		height: 8rpx;
		/* 下划线的厚度 */
		border-radius: 50rpx;
		background: #FB75D6;
		/* 下划线的颜色 */
		transform: translateX(-50%);
		/* 将下划线向左移动其自身宽度的一半，使其居中 */
	}

	.etagw {
		margin-right: 40rpx;
		color: #2A222F;
		font-size: 32rpx;
	}

	.tabegr {
		padding: 30rpx 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	page {
		width: 100%;
		height: 100vh;
		background: url('@/static/dazi/bgh.png') no-repeat;
		background-size: 100% 100%;
	}

	// 高亮选择
	.acti {
		background: rgba(248, 239, 249, 1);
		height: 75%;
		padding: 0 50rpx;
		border-radius: 100rpx;

	}

	.mainbotm {
		height: 128rpx;
		// margin: 0 40rpx 40rpx;
		padding: 0 30rpx 30rpx;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		box-shadow: 0px 6px 16px 0px #21465414;


		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.oenmy {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
		height: 96rpx;
		vertical-align: middle;
		border-radius: 50%;
		// background-color: #f7f8fa;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		// background-color: rgba(255, 255, 255, );
		// height: 200rpx;

		backdrop-filter: blur(4rpx);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, .1) -30%, rgba(255, 255, 255, .1) 50%);
		// padding: 20rpx;



		// backdrop-filter: blur(6px);
		//     background-image: linear-gradient(180deg, rgba(255, 255, 255, .5) -30%, rgba(255 ,255, 255, .5) 50%);

	}

	.onehome {
		display: flex;
		align-items: center;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.teben {
			margin-left: 10rpx;
			color: rgba(251, 117, 214, 1);
			font-size: 28rpx;
			font-weight: bold;
		}
	}


	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.page {
		background-color: #ffffff;
		background-image: url('/static/assets6/e9cd3fc4ee4eabc1262262a469ab1c21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.section {
			background-image: url('/static/assets6/e9cd3fc4ee4eabc1262262a469ab1c21.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 750rpx;
			height: 1624rpx;
		}

		.image {
			border-radius: 10rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.pos {
			position: absolute;
			right: 128rpx;
			top: 112rpx;
		}

		.pos_2 {
			position: absolute;
			right: 40rpx;
			top: 112rpx;
		}

		.image_2 {
			border-radius: 80rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.pos_3 {
			position: absolute;
			left: 40rpx;
			top: 216rpx;
		}

		.text {
			color: #2a222f;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 700;
			line-height: 37.2rpx;
		}

		.pos_4 {
			position: absolute;
			left: 233.64rpx;
			top: 232.92rpx;
		}

		.font {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.2rpx;
			color: #837386;
		}

		.text_2 {
			line-height: 22.06rpx;
		}

		.pos_6 {
			position: absolute;
			left: 233.06rpx;
			top: 292.42rpx;
		}

		.image_3 {
			width: 32rpx;
			height: 32rpx;
		}

		.pos_5 {
			position: absolute;
			right: 228rpx;
			top: 288rpx;
		}

		.text-wrapper {
			padding: 8rpx 0;
			border-radius: 24rpx;
			width: 82rpx;
			border-left: solid 2rpx #fb75d6;
			border-right: solid 2rpx #fb75d6;
			border-top: solid 2rpx #fb75d6;
			border-bottom: solid 2rpx #fb75d6;

			.text_3 {
				color: #fb75d6;
				font-weight: 700;
				line-height: 22.22rpx;
			}
		}

		.pos_7 {
			position: absolute;
			left: 231rpx;
			top: 327rpx;
		}

		.section_2 {
			padding: 0 40rpx;
			background-color: #ffffff;
			border-radius: 64rpx;

			.group {
				padding: 44rpx 0;
				border-bottom: solid 2rpx #f7eff8;

				.text_4 {
					color: #837386;
					line-height: 26.18rpx;
					font-weight: unset;
				}

				.image_5 {
					width: 46rpx;
					height: 38rpx;
				}

				.text_5 {
					color: #2a222f;
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: 700;
					line-height: 35.62rpx;
				}
			}

			.equal-division {
				padding: 40rpx 8rpx;

				.equal-division-item {
					flex: 1 1 272rpx;

					.image_6 {
						width: 40rpx;
						height: 40rpx;
					}

					.text_6 {
						color: #ffffff;
						line-height: 26.1rpx;
					}

					.text_7 {
						line-height: 26.16rpx;
					}
				}

				.section_3 {
					padding: 24rpx 0;
					background-color: #fb75d6;
					border-radius: 64rpx;
					height: 88rpx;
				}

				.section_4 {
					padding: 24rpx 0;
					background-color: #ffffff;
					border-radius: 64rpx;
					height: 88rpx;
					border-left: solid 2rpx #fb75d699;
					border-right: solid 2rpx #fb75d699;
					border-top: solid 2rpx #fb75d699;
					border-bottom: solid 2rpx #fb75d699;
				}
			}
		}

		.pos_8 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 416rpx;
		}

		.pos_9 {
			position: absolute;
			left: 40rpx;
			right: 40rpx;
			top: 824rpx;

			.list-item {
				padding: 36rpx 0 28rpx;
				background-color: #ffffff;
				border-radius: 32rpx;

				&:first-child {
					margin-top: 0;
				}

				.group_2 {
					padding: 0 32rpx;

					.text_8 {
						line-height: 22.18rpx;
					}
				}

				.equal-division_2 {
					padding: 0 8rpx;

					.group_3 {
						flex: 1 1 129.74rpx;

						.image_7 {
							width: 64rpx;
							height: 64rpx;
						}

						.image_8 {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.equal-division-item_2 {
						padding: 8rpx 0;
					}
				}
			}
		}

		.font_3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 26.2rpx;
			font-weight: 700;
			color: #000000;
		}

		.font_2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.2rpx;
			color: #2a222f;
		}

		.section_5 {
			padding: 16rpx 0;
			background-color: #ffffff;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			box-shadow: 0rpx 2rpx 2rpx #ffffff99 inset;

			.text-wrapper_2 {
				margin-right: 38rpx;
				padding: 36rpx 0;
				background-color: #f7eff8;
				border-radius: 48rpx;
				width: 216rpx;

				.text_15 {
					margin-right: 52rpx;
					line-height: 25.62rpx;
				}
			}

			.equal-division_4 {
				position: absolute;
				left: 88rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.group_6 {
				width: 507rpx;
			}
		}

		.pos_10 {
			position: absolute;
			left: 0;
			right: 0;
			top: 1428rpx;
		}

		.font_4 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 26.2rpx;
			font-weight: 700;
			color: #fb75d6;
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}

		.section_6 {
			background-color: #ffffff;
			width: 750rpx;
			height: 68rpx;
		}

		.pos_11 {
			position: absolute;
			left: 0;
			right: 0;
			top: 1556rpx;
		}
	}
</style>